<template>
    <el-card>
        <div class="header">
            <el-button type="primary" size="mini" @click="addCategory">新增</el-button>
        </div>
        <el-table :data="tableData" row-key="id" border class="table-box">
            <el-table-column align="center" prop="id" label="id"></el-table-column>
            <el-table-column align="center" prop="name" label="品牌名称"></el-table-column>
            <el-table-column align="center" prop="img" label="品牌图片" >
                <template slot-scope="scope">
                    <img :src="path + scope.row.img" class="table-img" >
                </template>
            </el-table-column>
            <el-table-column align="center" prop="create_time" label="创建时间"></el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" plain size="mini" class="table-but" @click="compile(scope.row.id)">编辑</el-button>
                    <el-button type="danger" plain size="mini" class="table-but" @click="del(scope.row.id)">删除</el-button>
                    <el-button v-if="scope.row.pid == 0" type="success" plain size="mini" class="table-but" @click="addChilds(scope.row.id, scope.row.name)">添加子类</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page-box _display_flex" v-if="tableData.length">
            <el-pagination background layout="prev, pager, next" @current-change="currentChange" :current-page="page" :page-size="rows" :total="total" ></el-pagination>
            <el-tag type="success">总共{{total}}条</el-tag>
        </div>
    </el-card>
</template>

<script>
export default {
    name: 'Brand',
    title: '商品品牌',
    methods: {
        // 新增
        addCategory() {
            this.$AddBrand({
                show: true,
                callback: (data) => {
                    this.tableData.push(data)
                }
            })
        },
        // 编辑
        compile(id) {
            this.$AddBrand({
                show: true,
                title: '编辑品牌',
                id,
                callback: (data) => {
                    this.tableData = this.tableData.map(v => {
                        if(v.id == id){
                            Object.assign(v, data)
                        }
                        return v
                    })
                }
            })
        },
        // 删除
        del(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.getDelBrand(id)
            }).catch(() => {});
        },
        // 删除接口
        async getDelBrand(id) {
            let data = { id}
            let res = await this.$Http.getDelBrand({ data })
            if(res){
                setTimeout(() => {
                    this.tableData = this.tableData.filter(v => v.id != id)
                }, 1000)
            }
        },
        // 分页
        currentChange() {

        },
        // 查询列表
        async getBrandList() {
            let res = await this.$Http.getBrandList()
            if(res) {
                this.tableData = res.rows
                this.total = res.count
            }
        }

    },
    data() {
        return {
            tableData: [],
            page: 1,
            rows: 10,
            total: 0
        }
    },
    mounted() {
        // 加载 列表
        this.getBrandList()
    }
}
</script>

<style lang="scss" scoped>
    .header{
        margin-bottom: 20px;
    }
    .table-box{
        width: 100%;
    }
    .table-img{
        width: 60px;
        height: 60px;
    }
    .page-box{
        justify-content: space-between;
        margin-top: 20px;
    }
</style>